
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Customize 字形图标（Glyphicons） - 菜鸟教程</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link
	href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css"
	rel="stylesheet" media="screen">
<link rel="stylesheet"
	href="https://apps.bdimg.com/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" />
<script
	src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script
	src="https://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<style>
body {
	padding-top: 70px
}

#red, #green, #blue {
	float: left;
	clear: left;
	width: 300px;
	margin: 15px;
}

#swatch {
	width: 120px;
	height: 100px;
	margin-top: 18px;
	margin-left: 350px;
	background-image: none;
}

#red .ui-slider-range {
	background: #ef2929;
}

#red .ui-slider-handle {
	border-color: #ef2929;
}

#green .ui-slider-range {
	background: #8ae234;
}

#green .ui-slider-handle {
	border-color: #8ae234;
}

#blue .ui-slider-range {
	background: #729fcf;
}

#blue .ui-slider-handle {
	border-color: #729fcf;
}

input {
	margin-top: 5px
}

#code {
	background-color: #c6e4f0;
	padding: 7px
}

.navbar-w3r {
	background: #4c4c4c; /* Old browsers */
	background: -moz-linear-gradient(top, #4c4c4c 5%, #595959 12%, #4c4c4c 18%, #2c2c2c
		50%, #131313 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #4c4c4c),
		color-stop(12%, #595959), color-stop(18%, #4c4c4c),
		color-stop(50%, #2c2c2c), color-stop(100%, #131313));
	/* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #4c4c4c 5%, #595959 12%, #4c4c4c 18%,
		#2c2c2c 50%, #131313 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #4c4c4c 5%, #595959 12%, #4c4c4c 18%, #2c2c2c
		50%, #131313 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #4c4c4c 5%, #595959 12%, #4c4c4c 18%, #2c2c2c
		50%, #131313 100%); /* IE10+ */
	background: linear-gradient(to bottom, #4c4c4c 5%, #595959 12%, #4c4c4c 18%, #2c2c2c
		50%, #131313 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c',
		endColorstr='#131313', GradientType=0); /* IE6-9 */
}
</style>
<!--[if lt IE 9]>
      <script src="https://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
      <script src="https://apps.bdimg.com/libs/respond.js/1.4.2/respond.js"></script>
    <![endif]-->
</head>
<body class="ui-widget-content" style="border: 0;">
	<div class="container">
		<div class="row">
			<div class="col-lg-3">
				<h3>Font Size</h3>
				<div id="slider"></div>
				<p id="slider-value"></p>
			</div>
			<div class="col-lg-6">
				<h3>Color</h3>
				<div id="red"></div>
				<div id="green"></div>
				<div id="blue"></div>
				<div id="swatch" class="ui-widget-content ui-corner-all"></div>
			</div>
			<div class="col-lg-3">
				<h3>Text shadow</h3>
				<form class="form-inline" role="form">
					<div class="form-group">
						<label class="sr-only" for="offsetx">Offset X</label> <input
							type="text" class="form-control" id="offsetx"
							placeholder="Enter offset-x, e.g. 2">
					</div>
					<div class="form-group">
						<label class="sr-only" for="offsety">Offset Y</label> <input
							type="text" class="form-control" id="offsety"
							placeholder="Enter offset-y, e.g. 2">
					</div>
					<div class="form-group">
						<label class="sr-only" for="blur">Blur distance</label> <input
							type="text" class="form-control" id="blur"
							placeholder="Enter blur distance, e.g. 2">
					</div>
					<div style="width: 100%">
						Select color <input type="color" id="color" value="#000000"
							list="colors">
						<div class="alert alert-error" style="display: none;">input[type=color]
							is not available on your browser</div>
						<datalist id="colors">
							<option>#ff0000</option>
							<option>#0000ff</option>
							<option>#00ff00</option>
							<option>#ffff00</option>
							<option>#00ffff</option>
							<option>#f00</option>
							<option>red</option>
						</datalist>
						<script>
							if (!Modernizr.inputtypes.color) {
								document.querySelector('#color').style.display = 'none';
								document.querySelector('#colors').previousElementSibling.style.display = 'block';
							}
						</script>
					</div>
					<button type="button" class="btn btn-success"
						style="margin: 10px 0 10px 0" onclick="CreateShadow();">Generate
						Text Shadow</button>
				</form>
			</div>
		</div>
		<div class="row">
			<div class="col-lg-12">
				<p id="code" style="display: none"></p>
				<table class="table table-bordered">
					<tr>
						<td><span class="glyphicon glyphicon-asterisk">
								Asterik</span></td>
						<td><span class="glyphicon glyphicon-plus"> Plus</span></td>
						<td><span class="glyphicon glyphicon-euro"> Euro</span></td>
						<td><span class="glyphicon glyphicon-envelope">
								Envelope</span></td>
						<td><span class="glyphicon glyphicon-pencil"> Pencil</span></td>
						<td><span class="glyphicon glyphicon-glass"> Glass</span></td>
					</tr>
					<tr>
						<td><span class="glyphicon glyphicon-music"> Music</span></td>
						<td><span class="glyphicon glyphicon-search"> Search</span></td>
						<td><span class="glyphicon glyphicon-heart"> Heart</span></td>
						<td><span class="glyphicon glyphicon-star"> Star</span></td>
						<td><span class="glyphicon glyphicon-star-empty">
								Empty</span></td>
						<td><span class="glyphicon glyphicon-user"> User</span></td>
					</tr>
					<tr>
						<td><span class="glyphicon glyphicon-film"> Film</span></td>
						<td><span class="glyphicon glyphicon-th-large"> Th
								large</span></td>
						<td><span class="glyphicon glyphicon-th"> Th</span></td>
						<td><span class="glyphicon glyphicon-th-list"> List</span></td>
						<td><span class="glyphicon glyphicon-ok"> Okay</span></td>
						<td><span class="glyphicon glyphicon-remove"> Remove</span></td>
					</tr>
					<tr>
						<td><span class="glyphicon glyphicon-zoom-in"> Zoom in</span></td>
						<td><span class="glyphicon glyphicon-zoom-out"> Zoom
								out</span></td>
						<td><span class="glyphicon glyphicon-off"> Off</span></td>
						<td><span class="glyphicon glyphicon-signal"> Signal</span></td>
						<td><span class="glyphicon glyphicon-cog"> Cog</span></td>
						<td><span class="glyphicon glyphicon-trash"> Trash</span></td>
					</tr>
					<tr>
						<td><span class="glyphicon glyphicon-home"> Home</span></td>
						<td><span class="glyphicon glyphicon-file"> File</span></td>
						<td><span class="glyphicon glyphicon-time"> Time</span></td>
						<td><span class="glyphicon glyphicon-road"> Road</span></td>
						<td><span class="glyphicon glyphicon-download-alt">
								Download alt</span></td>
						<td><span class="glyphicon glyphicon-download">
								Download</span></td>
					</tr>
					<tr>
						<td><span class="glyphicon glyphicon-upload"> Upload</span></td>
						<td><span class="glyphicon glyphicon-inbox"> Inbox</span></td>
						<td><span class="glyphicon glyphicon-play-circle">
								Play circle</span></td>
						<td><span class="glyphicon glyphicon-repeat"> Repeat</span></td>
						<td><span class="glyphicon glyphicon-refresh"> Refresh</span></td>
						<td><span class="glyphicon glyphicon-list-alt"> List
								alt</span></td>
					</tr>
					<tr>
						<td><span class="glyphicon glyphicon-lock"> Lock</span></td>
						<td><span class="glyphicon glyphicon-flag"> Flag</span></td>
						<td><span class="glyphicon glyphicon-headphones">
								Headphones</span></td>
						<td><span class="glyphicon glyphicon-volume-off">
								Volume-off</span></td>
						<td><span class="glyphicon glyphicon-volume-down">
								Volume-down</span></td>
						<td><span class="glyphicon glyphicon-volume-up">
								Volume-up</span></td>
					</tr>
					<tr>
						<td><span class="glyphicon glyphicon-qrcode"> Qrcode</span></td>
						<td><span class="glyphicon glyphicon-barcode"> Barcode</span></td>
						<td><span class="glyphicon glyphicon-tag"> Tag</span></td>
						<td><span class="glyphicon glyphicon-tags"> Tags</span></td>
						<td><span class="glyphicon glyphicon-book"> Book</span></td>
						<td><span class="glyphicon glyphicon-bookmark">
								Bookmark</span></td>
					</tr>
					<tr>
						<td><span class="glyphicon glyphicon-print"> Print</span></td>
						<td><span class="glyphicon glyphicon-camera"> Camera</span></td>
						<td><span class="glyphicon glyphicon-font"> Font</span></td>
						<td><span class="glyphicon glyphicon-bold"> Bold</span></td>
						<td><span class="glyphicon glyphicon-italic"> Italic</span></td>
						<td><span class="glyphicon glyphicon-text-height">
								Text-height</span></td>
					</tr>
					<tr>
						<td><span class="glyphicon glyphicon-text-width">
								Text-width</span></td>
						<td><span class="glyphicon glyphicon-align-left">
								Align-left</span></td>
						<td><span class="glyphicon glyphicon-align-center">
								Align-center</span></td>
						<td><span class="glyphicon glyphicon-align-right">
								Align-right</span></td>
						<td><span class="glyphicon glyphicon-align-justify">
								Align-justify</span></td>
						<td><span class="glyphicon glyphicon-list"> List</span></td>
					</tr>
					<tr>
						<td><span class="glyphicon glyphicon-indent-left">
								Indent-left</span></td>
						<td><span class="glyphicon glyphicon-indent-right">
								Indent-right</span></td>
						<td><span class="glyphicon glyphicon-facetime-video">
								Facetime-video</span></td>
						<td><span class="glyphicon glyphicon-picture"> Picture</span></td>
						<td><span class="glyphicon glyphicon-map-marker">
								Map-marker</span></td>
						<td><span class="glyphicon glyphicon-adjust"> Adjust</span></td>
					</tr>
					<tr>
						<td><span class="glyphicon glyphicon-tint"> Tint</span></td>
						<td><span class="glyphicon glyphicon-edit"> Edit</span></td>
						<td><span class="glyphicon glyphicon-share"> Share</span></td>
						<td><span class="glyphicon glyphicon-check"> Check</span></td>
						<td><span class="glyphicon glyphicon-move"> Move</span></td>
						<td><span class="glyphicon glyphicon-step-backward">
								Step-backward</span></td>
					</tr>
					<tr>
						<td><span class="glyphicon glyphicon-fast-backward">
								Fast-backward</span></td>
						<td><span class="glyphicon glyphicon-backward">
								Backward</span></td>
						<td><span class="glyphicon glyphicon-play"> Play</span></td>
						<td><span class="glyphicon glyphicon-pause"> Pause</span></td>
						<td><span class="glyphicon glyphicon-stop"> Stop</span></td>
						<td><span class="glyphicon glyphicon-forward"> Forward</span></td>
					</tr>
					<tr>
						<td><span class="glyphicon glyphicon-fast-forward">
								Fast-forward</span></td>
						<td><span class="glyphicon glyphicon-step-forward">
								Step-forward</span></td>
						<td><span class="glyphicon glyphicon-eject"> Eject</span></td>
						<td><span class="glyphicon glyphicon-chevron-left">
								Chevron-left</span></td>
						<td><span class="glyphicon glyphicon-chevron-right">
								Chevron-right</span></td>
						<td><span class="glyphicon glyphicon-plus-sign">
								Plus-sign</span></td>
					</tr>
					<tr>
						<td><span class="glyphicon glyphicon-minus-sign">
								Minus-sign</span></td>
						<td><span class="glyphicon glyphicon-remove-sign">
								Remove-sign</span></td>
						<td><span class="glyphicon glyphicon-ok-sign"> Ok-sign</span></td>
						<td><span class="glyphicon glyphicon-question-sign">
								Question-sign</span></td>
						<td><span class="glyphicon glyphicon-info-sign">
								Info-sign</span></td>
						<td><span class="glyphicon glyphicon-screenshot">
								Screenshot</span></td>
					</tr>
					<tr>
						<td><span class="glyphicon glyphicon-remove-circle">
								Remove-circle</span></td>
						<td><span class="glyphicon glyphicon-ok-circle">
								Ok-circle</span></td>
						<td><span class="glyphicon glyphicon-ban-circle">
								Ban-circle</span></td>
						<td><span class="glyphicon glyphicon-arrow-left">
								Arrow-left</span></td>
						<td><span class="glyphicon glyphicon-arrow-right">
								Arrow-right</span></td>
						<td><span class="glyphicon glyphicon-arrow-up">
								Arrow-up</span></td>
					</tr>
					<tr>
						<td><span class="glyphicon glyphicon-arrow-down">
								Arrow-down</span></td>
						<td><span class="glyphicon glyphicon-share-alt">
								Share-alt</span></td>
						<td><span class="glyphicon glyphicon-exclamation-sign">
								Exclamation-sign</span></td>
						<td><span class="glyphicon glyphicon-gift"> Gift</span></td>
						<td><span class="glyphicon glyphicon-leaf"> Leaf</span></td>
						<td><span class="glyphicon glyphicon-fire"> Fire</span></td>
					</tr>
					<tr>
						<td><span class="glyphicon glyphicon-eye-open">
								Eye-open</span></td>
						<td><span class="glyphicon glyphicon-eye-close">
								Eye-close</span></td>
						<td><span class="glyphicon glyphicon-warning-sign">
								Warning-sign</span></td>
						<td><span class="glyphicon glyphicon-plane"> Plane</span></td>
						<td><span class="glyphicon glyphicon-calendar">
								Calendar</span></td>
						<td><span class="glyphicon glyphicon-random"> Random</span></td>
					</tr>
					<tr>
						<td><span class="glyphicon glyphicon-comment"> Comment</span></td>
						<td><span class="glyphicon glyphicon-magnet"> Magnet</span></td>
						<td><span class="glyphicon glyphicon-chevron-up">
								Chevron-up</span></td>
						<td><span class="glyphicon glyphicon-chevron-down">
								Chevron-down</span></td>
						<td><span class="glyphicon glyphicon-retweet"> Retweet</span></td>
						<td><span class="glyphicon glyphicon-shopping-cart">
								Shopping-cart</span></td>
					</tr>
					<tr>
						<td><span class="glyphicon glyphicon-folder-close">
								Folder-close</span></td>
						<td><span class="glyphicon glyphicon-folder-open">
								Folder-open</span></td>
						<td><span class="glyphicon glyphicon-resize-vertical">
								Resize-vertical</span></td>
						<td><span class="glyphicon glyphicon-resize-horizontal">
								Resize-horizontal</span></td>
						<td><span class="glyphicon glyphicon-hdd"> Hdd</span></td>
						<td><span class="glyphicon glyphicon-bullhorn">
								Bullhorn</span></td>
					</tr>
					<tr>
						<td><span class="glyphicon glyphicon-bell"> Bell</span></td>
						<td><span class="glyphicon glyphicon-certificate">
								Certificate</span></td>
						<td><span class="glyphicon glyphicon-thumbs-up">
								Thumbs-up</span></td>
						<td><span class="glyphicon glyphicon-thumbs-down">
								Thumbs-down</span></td>
						<td><span class="glyphicon glyphicon-hand-right">
								Hand-right</span></td>
						<td><span class="glyphicon glyphicon-hand-left">
								Hand-left</span></td>
					</tr>
					<tr>
						<td><span class="glyphicon glyphicon-hand-up"> Hand-up</span></td>
						<td><span class="glyphicon glyphicon-hand-down">
								Hand-down</span></td>
						<td><span class="glyphicon glyphicon-circle-arrow-right">
								Circle-arrow-right</span></td>
						<td><span class="glyphicon glyphicon-circle-arrow-left">
								Circle-arrow-left</span></td>
						<td><span class="glyphicon glyphicon-circle-arrow-up">
								Circle-arrow-up</span></td>
						<td><span class="glyphicon glyphicon-circle-arrow-down">
								Circle-arrow-down</span></td>
					</tr>
					<tr>
						<td><span class="glyphicon glyphicon-globe"> Globe</span></td>
						<td><span class="glyphicon glyphicon-wrench"> Wrench</span></td>
						<td><span class="glyphicon glyphicon-tasks"> Tasks</span></td>
						<td><span class="glyphicon glyphicon-filter"> Filter</span></td>
						<td><span class="glyphicon glyphicon-briefcase">
								Briefcase</span></td>
						<td><span class="glyphicon glyphicon-fullscreen">
								glyphicon-fullscreen</span></td>
					</tr>
					<tr>
						<td><span class="glyphicon glyphicon-dashboard">
								Dashboard</span></td>
						<td><span class="glyphicon glyphicon-paperclip">
								Paperclip</span></td>
						<td><span class="glyphicon glyphicon-heart-empty">
								Heart-empty</span></td>
						<td><span class="glyphicon glyphicon-link"> Link</span></td>
						<td><span class="glyphicon glyphicon-phone"> Phone</span></td>
						<td><span class="glyphicon glyphicon-pushpin"> Pushpin</span></td>
					</tr>
					<tr>
						<td><span class="glyphicon glyphicon-usd"> Usd</span></td>
						<td><span class="glyphicon glyphicon-gbp"> GBP</span></td>
						<td><span class="glyphicon glyphicon-sort"> Sort</span></td>
						<td><span class="glyphicon glyphicon-sort-by-alphabet">
								Sort-by-alphabet</span></td>
						<td><span class="glyphicon glyphicon-sort-by-alphabet-alt">
								Sort-by-alphabet-alt</span></td>
						<td><span class="glyphicon glyphicon-sort-by-order">
								Sort-by-order</span></td>
					</tr>
					<tr>
						<td><span class="glyphicon glyphicon-sort-by-order-alt">
								Sort-by-order-alt</span></td>
						<td><span class="glyphicon glyphicon-sort-by-attributes">
								Sort-by-attributes</span></td>
						<td><span class="glyphicon glyphicon-sort-by-attributes-alt">
								Sort-by-attributes-alt</span></td>
						<td><span class="glyphicon glyphicon-unchecked">
								Unchecked</span></td>
						<td><span class="glyphicon glyphicon-expand"> Expand</span></td>
						<td><span class="glyphicon glyphicon-collapse-down">
								Collapse-down</span></td>
					</tr>
					<tr>
						<td><span class="glyphicon glyphicon-collapse-up">
								Collapse-up</span></td>
						<td><span class="glyphicon glyphicon-log-in"> Log-in</span></td>
						<td><span class="glyphicon glyphicon-flash"> Flash</span></td>
						<td><span class="glyphicon glyphicon-log-out"> Log-out</span></td>
						<td><span class="glyphicon glyphicon-new-window">
								New-window</span></td>
						<td><span class="glyphicon glyphicon-record"> Record</span></td>
					</tr>
					<tr>
						<td><span class="glyphicon glyphicon-save"> Save</span></td>
						<td><span class="glyphicon glyphicon-open"> Open</span></td>
						<td><span class="glyphicon glyphicon-saved"> Saved</span></td>
						<td><span class="glyphicon glyphicon-import"> Import</span></td>
						<td><span class="glyphicon glyphicon-export"> Export</span></td>
						<td><span class="glyphicon glyphicon-send"> Send</span></td>
					</tr>
					<tr>
						<td><span class="glyphicon glyphicon-floppy-disk">
								Floppy-disk</span></td>
						<td><span class="glyphicon glyphicon-floppy-saved">
								Floppy-saved</span></td>
						<td><span class="glyphicon glyphicon-floppy-remove">
								Floppy-remove</span></td>
						<td><span class="glyphicon glyphicon-floppy-save">
								Floppy-save</span></td>
						<td><span class="glyphicon glyphicon-floppy-open">
								Floppy-open</span></td>
						<td><span class="glyphicon glyphicon-credit-card">
								Credit-card</span></td>
					</tr>
					<tr>
						<td><span class="glyphicon glyphicon-transfer">
								Transfer</span></td>
						<td><span class="glyphicon glyphicon-cutlery"> Cutlery</span></td>
						<td><span class="glyphicon glyphicon-header"> Header</span></td>
						<td><span class="glyphicon glyphicon-compressed">
								Compressed</span></td>
						<td><span class="glyphicon glyphicon-earphone">
								Earphone</span></td>
						<td><span class="glyphicon glyphicon-phone-alt">
								Phone-alt</span></td>
					</tr>
					<tr>
						<td><span class="glyphicon glyphicon-tower"> Tower</span></td>
						<td><span class="glyphicon glyphicon-stats"> Stats</span></td>
						<td><span class="glyphicon glyphicon-sd-video">
								Sd-video</span></td>
						<td><span class="glyphicon glyphicon-hd-video">
								Hd-video</span></td>
						<td><span class="glyphicon glyphicon-subtitles">
								Subtitles</span></td>
						<td><span class="glyphicon glyphicon-sound-stereo">
								Sound-stereo</span></td>
					</tr>
					<tr>
						<td><span class="glyphicon glyphicon-sound-dolby">
								Sound-dolby</span></td>
						<td><span class="glyphicon glyphicon-sound-dolby">
								Sound-dolby</span></td>
						<td><span class="glyphicon glyphicon-sound-5-1">
								Sound-5-1</span></td>
						<td><span class="glyphicon glyphicon-sound-6-1">
								Sound-6-1</span></td>
						<td><span class="glyphicon glyphicon-sound-7-1">
								Sound-7-1</span></td>
						<td><span class="glyphicon glyphicon-copyright-mark">
								Copyright-mark</span></td>
					</tr>
					<tr>
						<td><span class="glyphicon glyphicon-registration-mark">
								Registration-mark</span></td>
						<td><span class="glyphicon glyphicon-cloud-download">
								Cloud-download</span></td>
						<td><span class="glyphicon glyphicon-cloud-upload">
								Cloud-upload</span></td>
						<td><span class="glyphicon glyphicon-tree-conifer">
								Tree-conifer</span></td>
						<td><span class="glyphicon glyphicon-tree-deciduous">
								Tree-deciduous</span></td>
						<td></td>
					</tr>
				</table>
			</div>
		</div>
	</div>
	<script
		src="https://apps.bdimg.com/libs/bootstrap/3.0.3/js/bootstrap.min.js"></script>
	<script src="../bootstrap/v3/change.js"></script>
</body>
</html>
